<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PetShop宠物商城</title>
    <style>
        *{
            margin:0;
            padding:0;
            list-style: none;
        }
        #mark{
            float:left;
        }
        #mark img{
            width:50px;
            height:50px;
            border-radius: 50%;
        }
        #box img{
            width: 100%;
            height:400px;
        }
        .tab_list{
            width:100%;
            height:60px;
            background-color: rosybrown;
        }
        .tab_list ul{
            margin-left: 200px;
        }
        .tab_list li{
            float:left;
            height:60px;
            line-height: 55px;
            padding:0 20px;
            text-align:center;
            cursor:pointer;
            list-style: none;
        }
        .tab_list .current{
            background-color: rgb(226, 148, 52);
            color:#fff;
        }
        .item_info{
            padding:20px 0 0 20px;
        }
        .item{
            display:none;
        }
        #line{
            width:70%;
            height:50px;
            margin:0 auto;
            background-color: bisque;
        }
        #line p,#linee p{
            position: absolute;
            margin-left: 20px;
            margin-top:10px;
            font-size: 20px;
        }
        #hotdog,#newdog{
            width: 70%;
            /* height:800px; */
            margin:0 auto;
            overflow: hidden;
            /* background-color: red; */
        }
        #allll{
            width: 100%;
            /* height:800px; */
            margin:0 auto;
            overflow: hidden;
        }
        #hot ,#new,#alllll,#love{
            float:left;
            margin-left: 35px;
            margin-top: 50px;
            width:220px;
            height:280px;
            /* background-color: purple; */
        }
        #hot img,#new img,#alllll img,#love img{
            width:220px;
            height:220px;
        }
        #hot p,#new p,#alllll p,#love p{
            font-size: 15px;
            text-align: center;
        }
        #haha{
            background-image: url('../images/2.jpg') ;
            background-attachment: fixed;
            background-size: 100% 100%;
            float:left;
            margin-left: auto;
            margin-right:auto;
            width: 100%;
            height:170px;
            z-index: 0;
        }
        #boxtwo{
            width: 70%;
            height:130px;
            margin:20px auto;
            background-color: rgb(255, 228, 196);
        }
        #boxtwo>#boxtwo-right ul li{
            font-size: 20px;
            float:left;
            margin-left:20px;
        }
        #boxtwo-left,#boxtwo-right{
            float:left;
        }
        #boxtwo-left{
            background-color: rgb(250, 197, 132);
            width:200px;
            height:100%;
        }
        #boxtwo-right{
            margin:20px;
            cursor: pointer;
        }
        #boxtwo-left ul li{
            margin-top: 20px;
            font-size:20px;
            text-align: center;
        }
        #enqinput{
            margin-top: 20px;
            margin-left: 20px;
        }

        #enqinput{
            float:left;
            width:260px;
            height: 28px;
            border: none;
            padding:5px;

        }
        .currentt{
            background-color: rgb(226, 148, 52);
            color:white;
        }
        .ccurrent{
            background-color: rgb(250, 197, 132);
            color:white;
        }
        #enq{
            float:left;
            width:80px;
            height: 38px;
            /* margin-left: -3px; */
            background-color: rgb(226, 148, 52);
            border-color:rgb(226, 148, 52) ;
            color:white;
            font-size: 20px;
            margin-top: 20px;
        }
        #enq:hover{
            color:rgb(226, 148, 52) ;
            background-color: white;
            color:rgb(226, 148, 52) ;

        }
        #alldog{
            width:70%;
            overflow: hidden;
            /* height:400px; */
            background-color: rgb(250, 241, 229);
            margin:-20px auto;
        }
        #alldog ul li{
            float:left;
            margin:10px;
        }
        #alldog button{
            margin:5px;
            width:60px;
            height:25px;
            border:none;
            cursor: pointer;
            background-color: rgb(250, 197, 132);
        }
        #heartt,#heart{
            width:70%;
            overflow: hidden;
            /* height:400px; */
            background-color: rgb(250, 241, 229);
            /* background-color: red; */
            margin:0 auto;
        }
        #heartt>p{
            margin:10px;
            font-size:20px;
        }，
         #uuserr{
             margin:0 auto;
             width:70%;
             font-size:17px;
             /* height:200px; */
             overflow: hidden;
             background-color: red;
             /* background-color: rgb(250, 241, 229); */
         }
        #linee{
            width:100%;
            height:50px;
            margin:0 auto;
            background-color: bisque;
        }
        #lll{
            width:80%;
            height:1px;
            background-color: rgba(68, 67, 67, 0.322);
        }
        #address{
            width:70%;
            height:100px;
            float:left;
            /* margin:0 auto; */
            margin:20px;
            padding:20px;
            background-color: rgb(250, 197, 132);
        }
        #informationo,#informationt,#addadd{
            padding:20px;
            overflow: hidden;
        }
        #oldadd{
            margin:10px;
        }
        #address button{
            float:right;
        }
        #pawo{
            margin:20px;
        }
        #uuserr #submit{
            float:right;
            margin:50px;
        }
        #heartpk{
            background-color: rgb(252, 122, 144);
            width:70%;
            height:200px;
            margin:20px auto;
        }
        #heartpk>h1,#heartpk>h2,#heartpk>h3{
            padding:10px;
        }

        table{
            margin:20px auto;
            background-color:  rgb(250, 197, 132);
            width: 800px;
            height:350px;
            text-align: center;
        }
        table>td{
            color:black;
        }

        #xian{
            width:80%;
            height:1px;
            float:left;
            background-color: rgba(68, 67, 67, 0.322);
        }
        .orderbox{
            width:70%;
            overflow: hidden;
            background-color: rgb(255, 228, 196);
            margin:0 auto;
        }
        .order li {
            cursor: pointer;
            float:left;
            padding:20px;
        }
        .itemm{
            float:left;
            width:100%;
            overflow: hidden;
        }
        #order-all,#order-no,#order-have,#order-go{
            width:80%;
            /*height:100px;*/
            /* margin:0 auto; */
            margin:20px;
            padding:20px;
            /*background-color: red;*/
            overflow: hidden;
            background-color: rgb(255, 228, 196);
        }
        #order-all img,
        #order-no img,
        #order-have img,
        #order-go img{
            width:100px;
            height:100px;
            float:left;
            margin-right:50px;
        }
        #orderall,#orderno,#orderhave,#ordergo{
            margin-left:10px;
            background-color: #fcf2ea;
            padding:20px;
            margin-bottom: 20px;
            width:1000px;
            overflow: hidden;
            float:left;
        }
        #orderall-btn button,#orderno-btn button,#orderhave-btn button,#ordergo-btn button,#qrdd{
            /* float:right; */
            margin-left:500px;
            /* width:50px; */
            margin-bottom: 5px;

            /* background-color: red; */
        }
        #order-con button,#submit,#qrdd{
            background-color: rgb(226, 148, 52);
            text-decoration: none;
            width:70px;
            height:28px;
            border:1px solid rgb(226, 148, 52);
            cursor: pointer;

        }
        #qrdd,#thtk{
            margin-left:90%;
        }
        #order-con a{
            text-decoration: none;
            color:black;
        }
        #ttable input{
            width:15px;
            height:15px;
            padding:5px;
        }
        #bugdog{
            width: 100px;
            height: 50px;
            float:right;
            font-size:20px;
            background-color: rgb(226, 148, 52);
            margin-right:100px;
        }


    </style>


</head>
<body>
<div class="tab">
    <div class="tab_list">
        <div id="mark">
            <img src="../images/dog.jpg" style="float:left;margin-top:5px;margin-left: 10px;" alt="">
            <p style="float:left;margin-top: 17px;font-size: 20px;margin-left: 10px;">Pet Shop</p>
        </div>
        <ul>
            <li class="current" >首页</li>
            <li>全部宠物</li>
            <li><button onclick="heartt()" style="background-color: transparent;border:none;width:90px;height:50px;font-size:15px;">爱心领养💗</button></li>
            <li><button onclick="cart();aaddres()" style="background-color: transparent;border:none;width:80px;height:50px;font-size:15px;">购物车|支付</button></li>
            <li><button style="background-color: transparent;border:none;width:80px;height:50px;font-size:15px;" onclick="allorder()">我的订单</button></li>
            <li><button onclick="addres()" style="background-color: transparent;border:none;width:80px;height:50px;font-size:15px;">个人中心</button></li>
        </ul>
    </div>
    <div class="tab_con">
        <!-- 1 -->
        <div class="item" style="display:block;" >
            <div id="box">
                <img src="/images/1.jpg" alt="">
            </div>

            <div id="line">
                <p>热销宠物</p>
            </div>
            <div id="hotdog"></div>
            <!-- <div id="hotdog">

                <div id="hot">
                    <a href="wb.html">
                        <img src="img/dog.jpg" alt="">
                    </a>
                    <p>柯基</p>
                    <p>$111</p>
                </div>


            </div> -->

            <div id="line" style="background-color: rgb(150, 219, 221);margin-top:20px;">
                <p>新品推荐</p>
            </div>

            <div id="newdog">
                <!-- <div id="new">
                    <a href="wb.html">
                        <img src="img/dog.jpg" alt="">
                    </a>
                    <p>柯基</p>
                    <p>$111</p>
                </div> -->
            </div>
<!--            <div id="line" style="margin-top: 10px;background-color:pink; ">-->
<!--                <p>今日爱心排行榜</p></div>-->
<!--            <div id="heartpk">-->
<!--                <h1>1、岳佳佳&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;100💗</h1>-->
<!--                <h2>2、宋甜甜&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;99💗</h2>-->
<!--                <h3>3、佩奇&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;98💗</h3>-->
<!--            </div>-->
        </div>


        <!-- 2 -->
        <div class="item">

            <div id="boxtwo">
                <div id="boxtwo-left">
                    <ul>
                        <!-- <li>选择类别</li> -->
                        <li style="margin-top:45px;">输入内容搜索</li>
                    </ul>
                </div>
                <div id="boxtwo-right">
                    <input type="text" id="enqinput" name="" placeholder="例如：泰迪棕色/比熊/暹罗猫">
                    <button id="enq">搜索</button>
                </div>
            </div>
            <div id="alldog">
                <button onclick="allenq()">综合</button>
                <button id="llow">价格🔺</button>
                <button id="hhigh">价格🔻</button>
                <div id="allll"></div>


                <!-- <div id="alllll">
                    <a href="wb.html">
                        <img src="img/dog.jpg" alt="">
                    </a>
                    <p>柯基</p>
                    <p>$111</p>
                </div> -->

            </div>
        </div>
    </div>


    <!-- 3 -->
    <div class="item">
        <div id="heartt">
            <p>活着是我流浪的目的</p>
            <p>却不是我流浪的原因</p>
            <p>在繁华城市中寻找来之不易的食物</p>
            <p>是脏的、是臭的、烂的，也要吃下去</p>
            <p>我等待着再一次的温暖</p>
            <p>期待一份饱餐…</p>
        </div>
        <div id="haha"></div>
        <div id="heart">

            <!-- <div id="love">
                <a href="wb.html">
                    <img src="img/dog.jpg" alt="">
                </a>
                <p>柯基</p>
                <p>$1</p>
            </div> -->

        </div>
    </div>


    <!-- 4 -->
    <div class="item">
        <table id="ttable">
            <thead>
            <tr>
                <td>
                    <input type="button" name="checkall" id="checkall" value="全选" style="width: 50px;height:25px"><br>
                    <input type="button" name="del" id="del" value="删除" style="width: 50px;height:25px">

                </td>
                <!-- <td>序号</td> -->
                <td>名称</td>
                <td>价钱</td>
                <td>数量</td>
            </tr>
            </thead>
            <tbody>
            </tbody>
            <tr>
                <td>总计：</td>
                <td colspan="6">￥<b class="totle">0</b>
                </td>
            </tr>
        </table>
        <p style="text-align: center;margin-top:10px;">PS:每只狗狗都是独一无二哒！小心宝贝被别人抢走啦！！快抓紧时间付款！</p>
        <div id="linee"><p>选择地址</p></div>
        <div id="dizhi" style="overflow: hidden;width:90%;margin-left:250px;">
        </div>
        <button  id="bugdog" onclick="pay()">支付</button>

    </div>


    <!-- 5 -->
    <div class="item" id="hahahaha">
        <div class="orderbox">
            <div class="order">
                <ul>
                    <li class="ccurrent"><button onclick="allorder()" style="background-color: transparent;border:none;width:80px;height:50px;font-size:15px;">全部</button></li>
                    <li><button onclick="goorder()" style="background-color: transparent;border:none;width:80px;height:50px;font-size:15px;">配送中</button></li>
                    <li><button onclick="haveorder()" style="background-color: transparent;border:none;width:80px;height:50px;font-size:15px;">已完成</button></li>
                </ul>
            </div>
            <div id="xian"></div>
            <div id="order-con">
                <!-- 全部 -->
                <div class="itemm" style="display:block;" >

                    <div id="order-all">
                    </div>


                </div>
                <!-- 配送中 -->
                <div class="itemm" style="display:none;">

                    <div id="order-go">

                    </div>
                </div>
                <!-- 已收货 -->
                <div class="itemm" style="display:none;">

                    <div id="order-have">

                    </div>

                </div>

            </div>
        </div>
    </div >

    <div class="item">
        <div id="useritem" style="background-color:rgb(250, 241, 229);width:70%;margin:0 auto;">
            <div id="linee"><p>个人信息</p></div>
            <div id="informationo">
                <p>用户名：<input id="myName" type="text"></p>
                <p>手机号：<input id="myPhone" type="text"></p>
            </div>

            <div id="linee"><p>我的地址</p></div>
            <div id="informationt">
            </div>
            <div id="linee"><p>添加地址</p></div>
            <div id="addadd">
                <p>我的收货地址：</p>
                姓名：<input type="text" id="adduser">
                电话：<input type="text" id="addphone"><br>
                地址：<input type="text" id="addname"><br>
                <button onclick="addaddr()">添加</button>
            </div>

            <div id="linee"><p>修改密码</p></div>
            <div id="pawo">
                <p>输入旧密码：<input type="password" id="oldpass"></p>
                <p>输入新密码：<input type="password" id="password"></p>
                <p>确认新密码：<input type="password" id="password2" onkeyup="jud()"></p>
                <div id="add"></div>
            </div>
            <button id ="submit" onclick="jiaoyan()">修改完成</button>
        </div>
    </div>
</div>
</div>
<script>


    var list = document.querySelector('.tab_list')
    var lis = list.querySelectorAll('li');
    var items = document.querySelectorAll('.item');

    for(var i = 0;i<lis.length;i++){
        lis[i].setAttribute('index',i);
        lis[i].onclick = function (){
            for(var i =0;i<lis.length;i++){
                lis[i].className = '';
            }
            this.className = 'current';
            var index = this.getAttribute('index');
            for(var i = 0;i<items.length;i++){
                items[i].style.display = 'none';
            }
            items[index].style.display = 'block';
        }
    }


    var password = document.getElementById('password');
    var password2 = document.getElementById('password2');
    function jud() {
        if(password.value == password2.value) {
            document.getElementById("add").innerHTML="<font color='green'>两次密码相同</font>";
        }else {
            document.getElementById("add").innerHTML="<font color='red'>两次密码不相同，请重新输入</font>";
        }
    }


    var price = document.getElementsByClassName('price');
    var checkall = document.getElementById('checkall');
    var del = document.getElementById('del');
    var hahaha = document.getElementById('hahaha');
    var checkElements = document.getElementsByName('itemss');
    var totle = document.getElementsByClassName('totle');
    var totleprice = 0;
    //全选
    var a = 0;
    checkall.onclick = function() {
        a++;
        if (a % 2 == 0) {
            for(var i = 0; i < checkElements.length; i++) {
                var checkElement = checkElements[i];
                checkElement.checked = false;
            }
        }
        else{
            for(var i = 0; i < checkElements.length; i++) {
                var checkElement = checkElements[i];
                checkElement.checked = "checked";
            }
        }
        showtotleprice();
    }
    //计算总计
    setInterval(function showtotleprice() {
        totleprice = 0;
        for (var i = 0; i < price.length; i++) {
            if (checkElements[i].checked == true) {
                totleprice += parseFloat(price[i].innerText);

            }
        }
        totle[0].innerText = totleprice;
    },1000);






    var  orderbox= document.querySelector('.orderbox');
    var lilili = orderbox.querySelectorAll('li');
    var itemm = document.querySelectorAll('.itemm');

    for(var i = 0;i<lilili.length;i++){
        lilili[i].setAttribute('index',i);
        lilili[i].onclick = function (){
            for(var i =0;i<lilili.length;i++){
                lilili[i].className = '';
            }
            this.className = 'ccurrent';
            var index = this.getAttribute('index');
            for(var i = 0;i<itemm.length;i++){
                itemm[i].style.display = 'none';
            }
            itemm[index].style.display = 'block';
        }
    }


    // var path = "http://192.168.0.27:8080";
    var path = "http://192.168.1.116:8080";
    // var path = "http://192.168.0.14:8080";
    // 热销宠物
    var aaa;
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if(xhr.readyState == 4) {
            if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
                var res = xhr.response;
                res = JSON.parse(res);
                aaa = res;
                var hot = document.getElementById("hotdog");
                for(let key in aaa){
                    // var goodId = 'goodId='+aaa[key].goodId;
                    console.log(aaa[key].goodId);
                    hot.innerHTML += "<div id='hot'>"+
                        "<a href='"+aaa[key].href+"'><img src="+
                        path+aaa[key].imagePath+"></a>"+"<p>"+
                        aaa[key].goodName+"</p>"+"<p>"+"￥"+
                        aaa[key].price+"</p>"+"</div>";
                }
            } else {
                alert("request is error!!a" + xhr.status);
            }
        }
    }
    xhr.open('get',path+'/user/hotPets',true);
    xhr.send(null);

    // 新品推荐
    var bbb;
    var xxhr = new XMLHttpRequest();
    xxhr.onreadystatechange = function() {
        if(xxhr.readyState == 4) {
            if(xxhr.status >= 200 && xxhr.status < 300 || xxhr.status == 304) {
                var xres = xxhr.response;
                // alert('X'+xres)
                bbb = JSON.parse(xres);
                //    alert('X'+bbb)
                var neww = document.getElementById("newdog");
                for(let key in bbb){
                    neww.innerHTML += "<div id='new'>"+
                        "<a href='"+bbb[key].href+"'><img src="+
                        path+bbb[key].imagePath+"></a>"+"<p>"+
                        bbb[key].goodName+"</p>"+"<p>"+"￥"+
                        bbb[key].price+"</p>"+"</div>";
                }
            } else {
                alert("request is error!!b" + xxhr.status);
            }
        }
    }
    xxhr.open('get',path+'/user/newPets',true);
    xxhr.send(null);

    // 商品分类搜索
    var ccc;
    var allxhr = new XMLHttpRequest();
    allxhr.onreadystatechange = function () {
        if(allxhr.readyState == 4) {
            if(allxhr.status >= 200 && allxhr.status < 300 || allxhr.status == 304) {
                var allres = allxhr.response;
                allres = JSON.parse(allres);
                ccc = allres;
                var allll = document.getElementById("allll");
                for(let key in ccc){
                    allll.innerHTML += "<div id='alllll' >"+
                        "<a href='"+ccc[key].href+"'><img src="+
                        path+ccc[key].imagePath+"></a>"+"<p>"+
                        ccc[key].goodName+"</p>"+"<p>"+"￥"+
                        ccc[key].price+"</p>"+"</div>";
                }
            } else {
                alert("request is error!!c" + allxhr.status);
            }
        }
    }
    allxhr.open('get',path+'/user/pets',true);
    allxhr.send(null);

    function allenq(){
        var ccc;
        var allxhr = new XMLHttpRequest();
        allxhr.onreadystatechange = function () {
            if(allxhr.readyState == 4) {
                if(allxhr.status >= 200 && allxhr.status < 300 || allxhr.status == 304) {
                    var allres = allxhr.response;
                    allres = JSON.parse(allres);
                    ccc = allres;
                    var allll = document.getElementById("allll");
                    // alert(ccc);
                    for(let key in ccc){
                        allll.innerHTML += "<div id='alllll' >"+
                            "<a href='"+ccc[key].href+"'><img src="+
                            path+ccc[key].imagePath+"></a>"+"<p>"+
                            ccc[key].goodName+"</p>"+"<p>"+"￥"+
                            ccc[key].price+"</p>"+"</div>";
                    }
                } else {
                    alert("request is error!!c" + allxhr.status);
                }
            }
        }
        allxhr.open('get',path+'/user/pets',true);
        allxhr.send(null);
    }


    var enqinput = document.getElementById('enqinput');
    var enq = document.getElementById('enq');
    enq.onclick = function enq(){
        // alert(enqinput.value);
        var xhr = new XMLHttpRequest();
        var data = enqinput.value;
        xhr.onreadystatechange = function() {
            if(xhr.readyState == 4) {
                if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
                    var res = xhr.response;
                    res = JSON.parse(res);
                    // alert(res);
                    allll.innerHTML = '';
                    // console.log(res)
                    for(let key in res){
                        allll.innerHTML += "<div id='alllll' >"+
                            "<a href='wb.html'><img src="+
                            path+res[key].imagePath+"></a>"+"<p>"+
                            res[key].goodName+"</p>"+"<p>"+"￥"+
                            res[key].price+"</p>"+"</div>";
                    }
                }else{
                    alert("request is error!!" + xhr.status);
                }
            }
        }
        xhr.open('get',path+'/user/searchPets?name='+data,true);
        // alert(data);
        xhr.send(null);
    }


    // 升序
    var llow = document.getElementById('llow');
    llow.onclick = function (){
        // alert(enqinput.value);
        var xhr = new XMLHttpRequest();
        // var data = enqinput.value;
        xhr.onreadystatechange = function() {
            if(xhr.readyState == 4) {
                if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
                    var res = xhr.response;
                    res = JSON.parse(res);
                    // alert(res);
                    allll.innerHTML = '';
                    // console.log(res)
                    for(let key in res){
                        allll.innerHTML += "<div id='alllll' >"+
                            "<a href='"+res[key].href+"'><img src="+
                            path+res[key].imagePath+"></a>"+"<p>"+
                            res[key].goodName+"</p>"+"<p>"+"￥"+
                            res[key].price+"</p>"+"</div>";
                        // console.log(allll.innerHTML)
                    }
                }else{
                    alert("request is error!!" + xhr.status);
                }
            }
        }
        xhr.open('get',path+'/user/petsOrderBy?orderBy=low',true);
        // alert(data);
        xhr.send(null);
    }

    // 降序
    var hhigh = document.getElementById('hhigh');
    hhigh.onclick = function (){
        // alert(enqinput.value);
        var xhr = new XMLHttpRequest();
        // var data = enqinput.value;
        xhr.onreadystatechange = function() {
            if(xhr.readyState == 4) {
                if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
                    var res = xhr.response;
                    res = JSON.parse(res);
                    allll.innerHTML = '';
                    // var xi;
                    for(let key in res){
                        allll.innerHTML += "<div id='alllll' >"+
                            "<a href='"+res[key].href+"'><img src="+
                            path+res[key].imagePath+"></a>"+"<p>"+
                            res[key].goodName+"</p>"+"<p>"+"￥"+
                            res[key].price+"</p>"+"</div>";
                        // xi = key;
                    }
                    // console.log(xi);
                }else{
                    alert("request is error!!" + xhr.status);
                }
            }
        }
        xhr.open('get',path+'/user/petsOrderBy?orderBy=high',true);
        // alert(data);
        xhr.send(null);
    }

    // love
    var ddd;
    var nxhr = new XMLHttpRequest();
    var abc;
    // var heart = document.getElementById('heart');
    function heartt(){
        nxhr.onreadystatechange = function() {
            if(nxhr.readyState == 4) {
                if(nxhr.status >= 200 && nxhr.status < 300 || nxhr.status == 304) {
                    var nres = nxhr.response;
                    nres = JSON.parse(nres);
                    ddd = nres;
                    // alert(ddd)
                    var heart = document.getElementById("heart");
                    for(let key in ddd){
                        heart.innerHTML += "<div id='love'>"+
                            "<a href='"+ddd[key].href+"'><img src='"+
                            path+ddd[key].imagePath+"'></a>"+"<p>"+
                            ddd[key].goodName+"</p>"+"<p>"+"￥"+
                            ddd[key].price+"</p>"+"</div>";
                    }
                } else {
                    alert("request is error!!b" + nxhr.status);
                }
            }
        }
        nxhr.open('get',path+'/user/lovePets',true);
        nxhr.send(null);

    }


    function cart(){
        console.log("----qqq");
        // 购物车
        var gxhr = new XMLHttpRequest();
        gxhr.onreadystatechange = function() {
            if(gxhr.readyState == 4) {
                if(gxhr.status >= 200 && gxhr.status < 300 || gxhr.status == 304) {
                    var gres = gxhr.response;
                    console.log("----",gres);
                    gres = JSON.parse(gres);
                    var tbody = document.querySelector('tbody');
                    tbody.innerHTML = "";
                    for(let key in gres){
                        tbody.innerHTML += "<tr><td><input type='checkbox' onclick='addPay(value)'  value='"+ gres[key].goodId+"' name='itemss'></td>"
                            +"<td>"+gres[key].good+"</td><td><span class='price'>"+gres[key].price+"</span>￥</td><td>"
                            +"<p class='text' id='shopone'>"+1+"</p><td></tr>"
                    }
                } else {
                    alert("request is error!!car" + gxhr.status);
                }
            }
        }
        gxhr.open('get',path+'/user/cart',true);
        gxhr.withCredentials = true;
        gxhr.send(null);

    }

    nxhr.onreadystatechange = function() {
        if(nxhr.readyState == 4) {
            if(nxhr.status >= 200 && nxhr.status < 300 || nxhr.status == 304) {
                var nres = JSON.parse(nxhr.response);
                var myName = document.getElementById("myName");
                var myPhone = document.getElementById("myPhone");
                myName.value=nres.customerName;
                myPhone.value=nres.phone;
                console.log(nres.customerName)
            } else {
                alert("request is error!!b" + nxhr.status);
            }
        }
    }
    nxhr.open('get',path+'/user/myInfo',true);
    nxhr.send(null);






    // 地址
    function addres(){
        var addrxhr = new XMLHttpRequest();
        addrxhr.onreadystatechange = function() {
            if(addrxhr.readyState == 4) {
                if(addrxhr.status >= 200 && addrxhr.status < 300 || addrxhr.status == 304) {
                    var res = addrxhr.response;
                    res = JSON.parse(res);
                    var informationt = document.getElementById("informationt");
                    informationt.innerHTML = '';
                    for(let key in res){
                        if (res[key].isdefault===1){
                            informationt.innerHTML += "<div id='address'><h3>"+res[key].username+"</h3><p>"+res[key].phone+"</p>"+
                                "<p>"+res[key].addressName+"</p><div id='lll'></div>"+"<input type='radio' onclick='changeDefault()' " +
                                "value='"+res[key].addressId+"' checked name='add' id='oldadd'>默认地址<button>删除地址</button></div>"
                        }else{
                            informationt.innerHTML += "<div id='address'><h3>"+res[key].username+"</h3><p>"+res[key].phone+"</p>"+
                                "<p>"+res[key].addressName+"</p><div id='lll'></div>"+"<input type='radio' onclick='changeDefault(value);' " +
                                "value='"+res[key].addressId+"' name='add' id='oldadd' >默认地址<button>删除地址</button></div>"
                        }
                    }
                } else {
                    alert("request is error!!a" + addrxhr.status);
                }
            }
        }
        addrxhr.open('get',path+'/user/addressList',true);
        addrxhr.send(null)
    }

    //修改默认地址
    var defaultAddr;
    // var oldadd = document.getElementById('oldadd').value;
    function changeDefault(value){
        var addxhr = new XMLHttpRequest();
        defaultAddr = this.value;
        // alert(defaultAddr);
        // alert(value);
        defaultAddr = "addressId=" + value;
        addxhr.onreadystatechange = function () {
            if (addxhr.readyState == 4) {
                if (addxhr.status >= 200 && addxhr.status < 300 || addxhr.status == 304) {
                    alert("修改默认地址成功！");
                    // informationt.innerHTML += "<div id='address'><h3>" + adduser.value + "</h3><p>" + addphone.value + "</p>" +
                    //     "<p>" + addname.value + "</p><div id='lll'></div>" + "<input checked type='radio' name='add'" +
                    //     " id='oldadd'>默认地址<button>删除地址</button></div>"
                } else {
                    alert("request is error!!c" + addxhr.status);
                }
            }
        }
        addxhr.open('post', path + '/user/addDefault', true);
        addxhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        addxhr.send(defaultAddr);
    }


    // 全部
    var orderall = document.getElementById("order-all");
    function allorder(){
        var xhr = new XMLHttpRequest();
        // var data = enqinput.value;
        xhr.onreadystatechange = function() {
            if(xhr.readyState == 4) {
                if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
                    var res = xhr.response;
                    res = JSON.parse(res);
                    if (res == null) {
                        orderhave.innerHTML = "这里空空如也呢";
                    }else {
                        console.log("全部订单");
                        orderall.innerHTML = "";
                        for (let i = 0; i < res.length; i++) {
                            var items = res[i].indentItems;
                            console.log(items);
                            console.log(res[i].indentStatus);

                            if (res[i].indentStatus == 1){
                                for (let j = 0; j < items.length; j++) {

                                    orderall.innerHTML += "<div id='orderall'><img src=" + path + items[j].imagePath + " ><p>【！狂欢价！】</p><h3>$" + items[j].univalence + "</h3><p>"
                                        + items[j].good + "</p></div><div id='orderall-btn'>"
                                }
                                orderall.innerHTML += "<button id='qrdd'>确认订单</button><br> <button id='thtk'>退货退款</button> </div>"
                            }else{
                                for (let j = 0; j < items.length; j++) {

                                    orderall.innerHTML += "<div id='orderall'><img src=" + path + items[j].imagePath + " ><p>【！狂欢价！】</p><h3>$" + items[j].univalence + "</h3><p>"
                                        + items[j].good + "</p></div><div id='orderall-btn'>"
                                }
                            }

                        }
                    }
                }else{
                    alert("request is error!!" + xhr.status);
                }
            }
        }
        xhr.open('get',path+'/user/myIndent',true);
        xhr.send(null);

    }

    // 派送中
    var ordergo = document.getElementById("order-go");
    function goorder(){
        // alert(123456)
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function() {
            if(xhr.readyState == 4) {
                if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
                    var res = xhr.response;
                    res = JSON.parse(res);
                    if (res == null) {
                        orderhave.innerHTML = "这里空空如也呢";
                    }else {
                        ordergo.innerHTML = "";
                        for (let i = 0; i < res.length; i++) {
                            var items = res[i].indentItems;
                            console.log(items);

                            for (let j = 0; j < items.length; j++) {

                                ordergo.innerHTML += "<div id='ordergo'><img src=" + path + items[j].imagePath + " ><p>【！狂欢价！】</p><h3>$" + items[j].univalence + "</h3><p>"
                                    + items[j].good + "</p></div><div id='ordergo-btn'>"
                            }
                            ordergo.innerHTML += "<button value='"+res[i].indentId+"' id='qrdd'>确认订单</button><br> <button value='"+res[i].indentId+"' id='thtk'>退货退款</button> </div>"
                        }
                    }
                }else{
                    alert("request is error!!" + xhr.status);
                }
            }
        }
        xhr.open('get',path+'/user/myDeliveryIndent',true);
        xhr.send(null);

    }


    // 已完成
    var orderhave = document.getElementById("order-have");
    function haveorder(){
        var xhr = new XMLHttpRequest();
        // var data = enqinput.value;
        xhr.onreadystatechange = function() {
            if(xhr.readyState == 4) {
                if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
                    var res = xhr.response;
                    res = JSON.parse(res);
                    console.log("nihao")
                    if (res == null) {
                        orderhave.innerHTML = "这里空空如也呢";
                    }else{
                    // alert(res);
                    // orderall.innerHTML = '';
                    console.log(res);
                    orderhave.innerHTML = "";
                    for (let i = 0; i < res.length; i++) {
                        var items = res[i].indentItems;
                        console.log(items);

                        for (let j = 0; j < items.length; j++) {

                            orderhave.innerHTML += "<div id='orderhave'><img src=" + path + items[j].imagePath + " ><p>【！狂欢价！】</p><h3>$" + items[j].univalence + "</h3><p>"
                                + items[j].good + "</p></div><div id='orderhave-btn'>"
                        }
                    }
                }
                }else{
                    alert("request is error!!" + xhr.status);
                }
            }
        }
        xhr.open('get',path+'/user/mySuccessIndent',true);
        xhr.send(null);
    }











    var address;
    var addphone = document.getElementById('addphone');
    var adduser = document.getElementById('adduser');
    var addname  = document.getElementById('addname');
    function addaddr(){
        var addxhr = new XMLHttpRequest();
        address = "addphone=" + addphone.value + "&adduser=" + adduser.value + "&addname=" + addname.value;
        addxhr.onreadystatechange = function () {
            if(addxhr.readyState == 4) {
                if(addxhr.status >= 200 && addxhr.status < 300 || addxhr.status == 304) {
                    alert("添加成功！");
                    informationt.innerHTML += "<div id='address'><h3>"+adduser.value+"</h3><p>"+addphone.value+"</p>"+
                        "<p>"+addname.value+"</p><div id='lll'></div>"+"<input type='radio' name='add'" +
                        " id='oldadd'>默认地址<button>删除地址</button></div>"

                } else {
                    alert("request is error!!c" + addxhr.status);
                }
            }
        }

        addxhr.open('post',path+'/user/addAddress',true);
        addxhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
        addxhr.send(address);
    }




    // 购物车地址
    function aaddres(){
        var addrxhr = new XMLHttpRequest();
        addrxhr.onreadystatechange = function() {
            if(addrxhr.readyState == 4) {
                if(addrxhr.status >= 200 && addrxhr.status < 300 || addrxhr.status == 304) {
                    var res = addrxhr.response;
                    res = JSON.parse(res);
                    var dizhi = document.getElementById("dizhi");
                    dizhi.innerHTML = '';

                    for(let key in res){
                        if (res[key].isdefault===1){
                            dizhi.innerHTML += "<div id='address'><h3>"+res[key].username+"</h3><p>"+res[key].phone+"</p>"+
                                "<p>"+res[key].addressName+"</p><div id='lll'></div>"+"<input type='radio' onclick='chooseAddress(value)' " +
                                "value='"+res[key].addressId+"' checked name='add' id='oldadd'>选择地址</div>"
                        }else{
                            dizhi.innerHTML += "<div id='address'><h3>"+res[key].username+"</h3><p>"+res[key].phone+"</p>"+
                                "<p>"+res[key].addressName+"</p><div id='lll'></div>"+"<input type='radio' onclick='chooseAddress(value)' " +
                                "value='"+res[key].addressId+"' name='add' id='oldadd' >选择地址</div>"

                        }
                    }
                } else {
                    alert("request is error!!a" + addrxhr.status);
                }
            }
        }
        addrxhr.open('get',path+'/user/addressList',true);
        addrxhr.send(null)
    }
    var defaultAddr;
    // var oldadd = document.getElementById('oldadd').value;
    function changeDefault(value){
        var addxhr = new XMLHttpRequest();
        defaultAddr = this.value;
        // alert(defaultAddr);
        // alert(value);
        defaultAddr = "addressId=" + value;
        addxhr.onreadystatechange = function () {
            if (addxhr.readyState == 4) {
                if (addxhr.status >= 200 && addxhr.status < 300 || addxhr.status == 304) {
                    alert("修改默认地址成功！");
                } else {
                    alert("request is error!!c" + addxhr.status);
                }
            }
        }
        addxhr.open('post', path + '/user/addDefault', true);
        addxhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        addxhr.send(defaultAddr);
    }



    var orderall = document.getElementById("order-all");
    function allorder(){
        var xhr = new XMLHttpRequest();
        // var data = enqinput.value;
        xhr.onreadystatechange = function() {
            if(xhr.readyState == 4) {
                if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
                    var res = xhr.response;
                    res = JSON.parse(res);
                    console.log(res);
                    orderall.innerHTML = "";
                    for (let i = 0; i < res.length ; i++) {
                        var items = res[i].indentItems;
                        console.log(items);
                        if (res[i].indentStatus == 1){
                            for (let j = 0; j < items.length; j++) {

                                orderall.innerHTML += "<hr style='margin-bottom: 20px;'><div id='orderall'><img src=" + path + items[j].imagePath + " ><p>【！狂欢价！】</p><h3>$" + items[j].univalence + "</h3><p>"
                                    + items[j].good + "</p></div><div id='orderall-btn'>"
                            }
                            orderall.innerHTML += "<button value='"+res[i].indentId+"' onclick='sure(value)' id='qrdd'>确认订单</button><br> <button value='"+res[i].indentId+"' onclick='returnPet(value)' id='thtk'>退货退款</button> </div>"
                        }else{
                            for (let j = 0; j < items.length; j++) {

                                orderall.innerHTML += "<div id='orderall'><img src=" + path + items[j].imagePath + " ><p>【！狂欢价！】</p><h3>$" + items[j].univalence + "</h3><p>"
                                    + items[j].good + "</p></div><div id='orderall-btn'>"
                            }
                        }

                    }
                }else{
                    alert("request is error!!" + xhr.status);
                }
            }
        }
        xhr.open('get',path+'/user/myIndent',true);
        xhr.send(null);

    }

    var address;
    var addphone = document.getElementById('addphone');
    var adduser = document.getElementById('adduser');
    var addname  = document.getElementById('addname');
    function addaddr(){
        var addxhr = new XMLHttpRequest();
        address = "addphone=" + addphone.value + "&adduser=" + adduser.value + "&addname=" + addname.value;
        addxhr.onreadystatechange = function () {
            if(addxhr.readyState == 4) {
                if(addxhr.status >= 200 && addxhr.status < 300 || addxhr.status == 304) {
                    alert("添加成功！");
                    informationt.innerHTML += "<div id='address'><h3>"+adduser.value+"</h3><p>"+addphone.value+"</p>"+
                        "<p>"+addname.value+"</p><div id='lll'></div>"+"<input type='radio' name='add'" +
                        " id='oldadd'>默认地址<button>删除地址</button></div>"

                } else {
                    alert("request is error!!c" + addxhr.status);
                }
            }
        }

        addxhr.open('post',path+'/user/addAddress',true);
        addxhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
        addxhr.send(address);
    }

    Array.prototype.indexOf = function(value) {
        for (var i = 0; i < this.length; i++) {
            if (this[i] == value) return i;
        }
        return -1;
    };
    var goodIdList=new Array();
    function addPay(value){
        var index =goodIdList.indexOf(value);
        if ( index ===-1){
            goodIdList.push(value);
            console.log(goodIdList);
        }else{
            goodIdList.splice(index, 1);
        }
    }

    var myAddress;
    function chooseAddress(value){
        if (value!=0){
            myAddress="";
            myAddress=value;
            console.log(myAddress);
        }else{
            alert("请选择宝贝的新家地址")
        }

    }
    // totleprice
    // goodIdList
    // myAddress
    //支付订单
    var myIndentData;
    var hahahaha = document.getElementById('hahahaha');
    function pay(){
        var addxhr = new XMLHttpRequest();
        myIndentData = "totalprice=" + totleprice+"&address="+myAddress+"&goodId="+goodIdList;
        addxhr.onreadystatechange = function () {
            if (addxhr.readyState == 4) {
                if (addxhr.status >= 200 && addxhr.status < 300 || addxhr.status == 304) {
                    alert("订单提交成功！！！");
                    lis[4].className = 'current';
                    lis[3].className = '';
                    items[4].style.display = 'block';
                    items[3].style.display = '';
                    allorder();
                } else {
                    alert("提交订单失败!!c" + addxhr.status);
                }
            }
        }
        addxhr.open('post', path + '/user/buy', true);
        addxhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        addxhr.send(myIndentData);
    }

    var oldpass = document.getElementById('oldpass');
    var newpass = document.getElementById('password');
    function jiaoyan() {
        var xhr = new XMLHttpRequest();
        var dataa = "oldPass=" + oldpass.value + "&newPass=" + newpass.value;
        xhr.onreadystatechange = function() {
            if(xhr.readyState == 4) {
                if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
                    var res = xhr.responseText;
                    alert(res);
                } else {
                    alert("request is error!!" + xhr.status);
                }
            }
        }
        xhr.open('post',path+'/user/editPassword',true);
        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
        xhr.send(dataa);
    }

    function sure(value) {
        var xhr = new XMLHttpRequest();
        console.log(value);
        var dataa = "indentId="+value;
        console.log(dataa);
        xhr.onreadystatechange = function() {
            if(xhr.readyState == 4) {
                if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
                    var res = xhr.responseText;
                    alert(res);
                    lilili[2].className = 'ccurrent';
                    lilili[0].className = '';
                    itemm[2].style.display = 'block';
                    itemm[0].style.display = 'none';

                    haveorder();
                } else {
                    alert("request is error!!" + xhr.status);
                }
            }
        }
        xhr.open('get',path+'/user/sureIndent?indentId='+value,true);
        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
        xhr.send(dataa);
    }

    function returnPet(value){
        var xhr = new XMLHttpRequest();
        console.log(value);
        var dataa = "indentId="+value;
        console.log(dataa);
        xhr.onreadystatechange = function() {
            if(xhr.readyState == 4) {
                if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
                    var res = xhr.responseText;
                    alert(res);
                    lilili[1].className = 'ccurrent';
                    lilili[0].className = '';
                    itemm[1].style.display = 'block';
                    itemm[0].style.display = 'none';
                    goorder();
                    // haveorder();
                } else {
                    alert("request is error!!" + xhr.status);
                }
            }
        }
        xhr.open('get',path+'/user/returnPet?indentId='+value,true);
        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
        xhr.send(dataa);
    }



</script>
<div style="background-color:rosybrown;width:100%;
        height:100px;margin-top:50px;"></div>
</body>
</html>